<template>
	<view class="message-page">
		<!-- 列表内容 -->
		<z-paging ref="paging" v-model="msgList" :auto="false" @refresherTouchend="queryList"
			:show-loading-more-no-more-view="false">
			<view slot="top">
				<!-- #ifdef H5 -->
				<view class="top-box">
					<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
					<view class="nav-box">
						<!-- <image src="../../static/message/arrow-left.png" class="arrow-left" @click="navigatorBack">
						</image> -->
						<image :src="userInfo.avatar" class="nav-icon" v-if="userInfo"></image>
						<view v-if="userInfo">{{userInfo.nickname}}</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<u-navbar title="系统消息" :autoBack="true" :placeholder="true"></u-navbar>
				<!-- #endif -->
			</view>
			<view class="message-list" v-if="userInfo&&msgList.length>0">
				<view class="message-item" v-for="(row, index) in msgList" :key="index">
					<view class="item-time">{{row.datetime}}</view>
					<view class="item-content" v-for="(item, msgIndex) in row.data" :key="msgIndex">
						<image :src="userInfo.avatar" class="item-left"></image>
						<view class="item-right">
							<rich-text :nodes="item.message"></rich-text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/utils/login.js';
	const app = getApp();
	export default {
		data() {
			return {
				to_user_id: null,
				session_id: null,
				userInfo: null,
				msgInfo: null,
				pageBg: '/static/common/page_bg2.png',
				msgList: [],
			}
		},

		onShow() {
			this.getMsgList()
		},
		onLoad(option) {
			this.to_user_id = option.user_id
			if (option.session_id) {
				this.session_id = option.session_id
			}
			uni.$on('message', this.getMessage)
			uni.$on('connect-success', this.connectSuccess)
		},

		// 页面卸载时取消监听
		onUnload() {
			uni.$off('message', this.getMessage)
			uni.$on('connect-success', this.connectSuccess)
		},
		methods: {
			queryList() {
				if (this.msgInfo.next_page != 'done') {
					this.sendMessage({
						c: "Message",
						a: "chat_record",
						data: {
							session_id: this.session_id,
							page: this.msgInfo.next_page
						}
					})
				} else {
					if (this.$refs.paging) {
						this.$refs.paging.complete(this.msgList)
					}
				}
			},
			sendMessage(param) {
				if (app.globalData.socketObj) {
					app.globalData.socketObj.sendMsg(param)
				}
			},
			connectSuccess() {
				console.log('连接成功')
				this.getMsgList();
			},

			// 接收到消息的回调
			getMessage(msg) {
				let messageData = JSON.parse(msg.data)
				console.log("收到消息了", messageData)
				if (messageData.msgtype == "new_message") {
					this.sendMessage({
						c: "Message",
						a: "read_message",
						data: {
							record_id: messageData.data.record_id,
						}
					})
					this.msgList[0].data.push(messageData.data);
					this.scrollTo(1)
				}
				if (messageData.msgtype == "chat_record") {
					this.msgInfo = messageData.data
					this.userInfo = messageData.data.session_info
					let msgList = []
					msgList = messageData.data.chat_record
					for (var i = 0; i < msgList.length; i++) {
						msgList[i].data = msgList[i].data.reverse()
					}
					if (this.msgInfo.page == 1) {
						this.msgList = msgList
						this.$refs.paging.scrollToBottom(false)
					} else {
						for (let i = 0; i < msgList.length; i++) {
							this.msgList.unshift(msgList[i]);
						}
						this.$refs.paging.scrollToBottom(false)
					}
					console.log(this.msgList)
					if (this.$refs.paging) {
						this.$refs.paging.complete(this.msgList);
					}
				}
			},
			// 加载初始页面消息
			getMsgList() {
				// 消息列表
				this.sendMessage({
					c: "Message",
					a: "chat_record",
					data: {
						session_id: this.session_id,
						page: 1
					}
				})
			},
			//返回
			navigatorBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.scrollToTop()
					this.$refs.paging.refresh();
				}
			},
			// queryList(pageNo, pageSize) {
			// 	this.$Api.user.getSystemMessageList({
			// 		page: pageNo,
			// 		limit: pageSize,
			// 	}).then(res => {
			// 		this.$refs.paging.complete(res.data.data);
			// 	}).catch(res => {
			// 		this.$refs.paging.complete(false);
			// 	})
			// },
		},
	}
</script>

<style lang="scss" scoped>
	.message-page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #f8f8f8;

		.top-box {
			position: relative;
			height: 120rpx;
			display: flex;
			align-items: center;

			.pageBg {
				position: absolute;
				top: 0;
				width: 100%;
				height: 120rpx;
			}

			.nav-box {
				padding: 20rpx;
				position: relative;
				z-index: 10;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #323334;

				.arrow-left {
					width: 24rpx;
					height: 48rpx;

				}

				.nav-icon {
					margin: 0 10rpx 0 0;
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
				}
			}

		}
	}

	.message-list {
		padding: 20rpx 0rpx 0;
	}

	.message-item {
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 26rpx 20rpx;

		.item-time {
			text-align: center;
			font-size: 24rpx;
			color: #ADADAD;
			padding-bottom: 40rpx;
		}

		.item-content {
			display: flex;
			align-items: start;
			margin-bottom: 20rpx;
			width: 553rpx;

			.item-left {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.item-right {
				flex: 1;
				padding: 20rpx;
				background: #ffffff;
			}
		}

	}
</style>